<template>
    <div class="note-index">
        <div class="paper-menus">
            <Button type="primary" @click="addNote()">
                <Icon type="md-add-circle"/>
                <span class="add-paper-span">添加笔记</span></Button>
        </div>
        <!--表格头部信息条-->
        <div class="ivu-mt ivu-alert ivu-alert-info ivu-alert-with-icon">
            <span class="ivu-alert-icon"><i class="ivu-icon ivu-icon-ios-information-circle"></i></span>
            <span class="ivu-alert-message"><div style="font-size: 14px;">总记录数 <strong
                style="color: rgb(45, 140, 240);">{{ noteList.length }}</strong> 条</div></span>
            <span class="ivu-alert-desc"></span>
        </div>
        <div class="table-note">
            <!--<Table :columns="columns" :data="noteList"></Table>-->
            <div class="exam-lists">
                <div class="exam-item" v-for="note in noteList">
                    <div class="note-cover">
                        <img v-if="note.fileUrl === '' || note.fileUrl === null"
                             src="http://cdn.tmooc.cn/bsfile//imgad///8D4204DFC45C40BCBF68150E442E1D18.png"/>
                        <img v-if="note.fileUrl !== '' && note.fileUrl !== null" :src="note.fileUrl"/>
                    </div>
                    <div class="over-difficulty"><span>所属试卷</span>
                        <div class="level">{{ note.noteTitle }}</div>
                    </div>
                    <div class="create-time">
                        <span class="subject-icon">题目标签<span class="icon_label">{{ note.categoryId }}</span></span>
                        <span>{{ dateFormat(note.createTime) }}</span>
                    </div>
                    <div class="option-menu">
                        <Upload action="http://localhost:9201/note/uploadCover" :format="['jpg','jpeg','png']"
                                :max-size="1024"
                                :before-upload="beforUpload"
                                :on-success="success">
                            <Button icon="ios-cloud-upload-outline">上传封面图片</Button>
                        </Upload>
                        <a class="add-subject-option" v-on:click="uploadModelModal(note)">
                            <Icon type="md-add"></Icon>
                            添加封面</a>
                    </div>
                </div>
            </div>
        </div>
        <!--添加试卷模态框-->
        <div class="add-paper-modal">
            <Drawer title="添加笔记" :closable="false" v-model="showDrawer" width="80%" scrollable>
                <Form :model="noteEntity" ref="noteForm" :rules="noteRules">
                    <div class="add-note-items">
                        <FormItem label="笔记标题" prop="noteTitle">
                            <Input v-model="noteEntity.noteTitle" placeholder="请输入笔记标题"></Input>
                        </FormItem>
                        <FormItem label="试卷类目" prop="categoryId" style="z-index: 1501">
                            <Select v-model="noteEntity.categoryId">
                                <Option v-for="category in categoryList" :value="category.id">{{
                                        category.categoryName
                                    }}
                                </Option>
                            </Select>
                        </FormItem>
                    </div>
                    <FormItem prop="noteContent">
                        <span class="note-temp" @click="setNoteContent()">模板</span>
                        <mavon-editor ref="md" id="editor" v-model="noteEntity.noteContent" @imgAdd="uploadImg"
                                      @imgDel="handleEditorImgDel"/>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="saveNote('paperForm')">确定</Button>
                    </FormItem>
                </Form>
            </Drawer>
        </div>
    </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import { globalUrl } from '../api/doMain'

export default {
    inject: ['reload'], // 引入局部刷新到组件
    name: 'Note',
    created () {
        this.queryList()
    },
    // 注册
    components: {
        mavonEditor,
    },
    data () {
        return {
            showDrawer: false,
            noteEntity: {},
            categoryList: [],
            noteList: [],
            columns: [
                {
                    title: 'Id',
                    key: 'paperId',
                    type: 'selection',
                    width: 55
                },
                {
                    title: '笔记标题',
                    key: 'noteTitle'
                },
                {
                    title: '难度',
                    key: 'level'
                },
                {
                    title: '类目',
                    key: 'categoryName'
                },
                {
                    title: '创建时间',
                    key: 'createTime',
                    render: (h, params) => {
                        return h('div',
                            this.dateFormat(params.row.createTime)
                        )
                    }
                }
            ],
            noteRules: {},
            imgFile: [],
            // 要上传的全部数据
            uploadModel: {
                file: '',
                noteId: '',
            }
        }
    },
    methods: {
        queryList () {
            let that = this
            that.http.post(globalUrl + '/note/queryList').then(function (response) {
                that.noteList = response.data.data
            })
        },
        addNote () {
            let that = this
            this.showDrawer = true
            that.http.post(globalUrl + '/category/queryList', { token: window.sessionStorage.getItem('token') }).then(function (response) {
                that.categoryList = response.data.data
            })
        },
        // 设置默认编辑模板内容
        setNoteContent () {
            this.noteEntity.noteContent = '> 初始Java语言，Java语言诞生到现在已经跨过了很多版本的变迁，同时也经历了很多语言的更替，Java依然坚挺并且似乎越来越强大，所能开发的软件也越来越多，这是为什么？个人觉得应该是Java语言基础简单、面向对象丰富、框架越来越多、IDE越来越智能等综合原因吧~~\n' +
                '本文重点介绍Java的发展以及IDE的使用。\n' +
                '\n' +
                '## 前言\n' +
                '为什么学Java\n' +
                'Java开发环境搭建和配置\n' +
                '理解Java编译原理\n' +
                '使用IDEA开发Java程序\n' +
                '\n' +
                '## 一、为什么学Java？\n' +
                '一张图可以告诉你理由~~\n' +
                '![image.png](http://happy.study566.com/2021-04-04/d6d2ded5-71e4-4ecf-a32e-6c51fc315cae.png)\n' +
                '> 虽然一张图代表不了什么，但是Java语言在历史上的地位不可撼动。\n' +
                '\n' +
                '### 1.Java可以做什么\n' +
                '==C/S客户端==：银行软件、商场结算软件\n' +
                '==B/S服务端==：系统、服务类软件\n' +
                '==移动端==：安卓APP\n' +
                '==高速运算与存储==：大数据\n' +
                '\n' +
                '> 正是由于Java可开发的软件类型太全面，几乎市面上所有类型的软件都能做，大到服务器类软件，小到一个简单客户端软件，通俗的说：我们每个人每天都在用的就是Java干的。\n' +
                '但是我们知道任何事都不是绝对的，Java也有缺点，例如PC的客户端。\n' +
                '\n' +
                '### 2.Java的诞生\n' +
                'Java是Sun Microsystems于==1995==年推出的高级编程语言。\n' +
                '![image.png](http://happy.study566.com/2021-04-04/8c8bb296-53f7-4ce0-9876-b292917405a0.png)\n' +
                '> Java第一个版本发布于1995年，时至今日Java已经到JDK15了，足可以说明Java更新迭代能力。\n' +
                '\n' +
                '### 3.Java技术平台\n' +
                'JavaSE：俗称为==Java Standard Edition==，涵盖Java基础语法、JavaAPI等Java入门级知识点；\n' +
                'JavaEE：俗称为==Java Enterprise Edition==，涵盖了Servlet/JSP，服务器等web开发；\n' +
                'JavaME：俗称为==Java Mobile Edition==，涵盖了游戏通信等手机客户端开发，在很多年前代表作为**塞班**，目前基本代表**安卓**。\n' +
                '\n' +
                '## 二、Java开发环境搭建和配置\n' +
                '> Java由于是sun公司产品，目前并没有很window等系列操作系统深入合作，导致在任何平台下使用Java就必须先安装JDK（**Java Developer Kit：Java开发者工具**）。\n' +
                '在发展很多年后Java完全被Oracle（甲骨文）公司收购，目前JDK下载渠道为Oracle公司官网。\n' +
                '\n' +
                '### 1.下载地址：\n' +
                '> https://www.oracle.com/java/technologies/javase-jdk16-downloads.html\n' +
                '\n' +
                '### 2.安装步骤：\n' +
                'JDK的安装和其他PC客户端软件一样，几乎傻瓜式的**下一步**即可，但唯一的是JDK安装完桌面上找不到==exe启动图标==。\n' +
                '\n' +
                '### 3.环境的配置\n' +
                '安装完JDK表示你的电脑上只是有了可以开发和编译Java电脑的工具包（JDK）\n' +
                '，但如果没有进行合适的环境配置，使用起来非常麻烦，需要每次找到你的安装路径（默认情况下为：**C:\\Program Files\\Java**）。\n' +
                '#### 1）配置JDK到系统\n' +
                'a）找到JDK具体安装路径-->鼠标右键桌面【此电脑】图标-->属性-->高级系统设置-->环境变量；\n' +
                'b）在系统变量中新建，变量名填：CLASSPATH，变量值填：. 此步操作表示当前类路径（编译代码时需要用到）；\n' +
                'c）最重要的一步：在**系统变量**中找到==Path==变量，双击打开后添加你**D:\\Program Files\\Java\\jdk1.8.0_241\\bin**，此处是你电脑上JDK安装具体路径，你需要换成你自己的地址。\n' +
                '\n' +
                '#### 2）使用JDK\n' +
                'a）上面配置步骤走完以后，打开你电脑的DOS窗口；菜单-->运行-->c输入cmd-->回车后出现黑色全屏；\n' +
                '![image.png](http://happy.study566.com/2021-04-04/f7578917-2abd-4657-bd79-c6bc4f7f2165.png)\n' +
                '\n' +
                'b）输入：java -version，表示查询当前系统中是否安装完JDK并配置成功，成功后输出JDK的版本信息；\n' +
                '![image.png](http://happy.study566.com/2021-04-04/f9bea51b-b2cd-4528-8718-3428842b937a.png)\n' +
                '\n' +
                'c）一旦出现如上图的效果，则恭喜你，JDK安装成功并配置正确，可以开干啦~~\n' +
                '\n' +
                '##  三、理解Java编译原理\n' +
                '> Java语言的强大不仅体现在语言本身，更加体现在JDK，目前官方提供了Window、Linux、Mac等主流操作系统的JDK版本。\n' +
                '\n' +
                '### 1.Java虚拟机和跨平台\n' +
                '![image.png](http://happy.study566.com/2021-04-04/cb0ecce2-b359-4468-a33c-43e72652740d.png)\n' +
                '> 如图所示，Java号称**一次编写，到处运行**，正是因为Java虚拟机跨平台的好处。\n' +
                '\n' +
                '## 四、使用IDE开发Java程序\n' +
                '> 由于Java的流行性，导致目前市面上提供了很多Java集成开发工具，最流行的莫过于eclipse、MyEclipse等前古老工具，随着现在Java框架和微服务的诞生，最适合Java的集成工具当属IDEA。\n' +
                '\n' +
                '### 1.下载地址\n' +
                'a）eclipse：**[https://www.eclipse.org/downloads/](https://www.eclipse.org/downloads/)**\n' +
                'b）MyEclipse：**[https://www.genuitec.com/products/myeclipse/download/](https://www.genuitec.com/products/myeclipse/download/)**\n' +
                'c）IDEA：**[https://www.jetbrains.com/zh-cn/idea/download/#section=windows](https://www.jetbrains.com/zh-cn/idea/download/#section=windows)**\n' +
                '\n' +
                '> 总的来说，三个工具各有优点，视情况而定选择使用，为了开发便捷和实用性建议一次性到位使用==IEDA==即可。\n' +
                '\n' +
                '### 2.安装工具\n' +
                '> 三款工具安装都很方便简单，和普通软件类似，确定好安装位置即可，需要注意的是其中MyEclipse和IDEA属于收费产品，如要使用请找到破解方式，具体破解方式网上很多，而且各有不同，如有需要可以邮件联系~~\n' +
                '\n' +
                '### 3.开发程序\n' +
                '以下展示一段IEDA基础入门代码~\n' +
                '```\n' +
                'package cn.kfc;\n' +
                '\n' +
                'public class Test {\n' +
                '    public static void main ( String[] args ) {\n' +
                '        System.out.println ( "欢迎来到Java世界~~" );\n' +
                '    }\n' +
                '}\n' +
                '```\n' +
                '## 总结\n' +
                '好啦：本次笔记告一段落，开始你的学习Java之旅吧~~，喜欢的可以转发哦。\n'
        },
        // 上传笔记正文中的图片
        uploadImg (pos, $file) {
            let that = this
            let formData = new FormData()
            formData.append('file', $file)
            this.imgFile[pos] = $file
            that.http.post(globalUrl + '/note/upload', formData).then(function (response) {
                if ( response.status === 200 && response.data.code === '1' ) {
                    that.$refs.md.$img2Url(pos, response.data.url)
                } else {
                    console.log('上传失败')
                }
            })
        },
        // 删除图片
        handleEditorImgDel (pos) {
            delete this.imgFile[pos]
        },
        // 保存笔记内容
        saveNote () {
            let that = this
            if ( that.noteEntity.noteTitle === '' || that.noteEntity.noteTitle === undefined ) {
                that.msg.error('笔记标题不能为空')
                return
            }
            if ( that.noteEntity.categoryId === '' || that.noteEntity.categoryId === undefined ) {
                that.msg.error('笔记类目不能为空')
                return
            }
            if ( that.noteEntity.noteContent === '' || that.noteEntity.noteContent === undefined ) {
                that.msg.error('笔记内容不能为空')
                return
            }
            if ( that.noteEntity.noteContent.length < 500 ) {
                that.msg.error('笔记内容不能少于500字')
                return
            }
            that.http.post(globalUrl + '/note/addSingle', that.noteEntity).then(function (response) {
                if ( response.data.code === '000000' ) {
                    that.msg.success('笔记保存成功')
                    that.reload()
                } else {
                    that.msg.error('笔记保存失败')
                }
            })
        },
        // 上传笔记封面图片
        beforUpload (file) {
            this.uploadModel.file = file
            //阻止自动上传
            return false
        },
        uploadModelModal (note) {
            let that = this
            if ( that.uploadModel.file === '' || that.uploadModel.file === null ) {
                that.msg.error('上传图片为空')
                return
            }
            let config = {
                headers: { 'Content-Type': 'multipart/form-data' }
            }
            //以formData形式上传
            var param = new FormData()
            param.append('file', that.uploadModel.file)
            param.append('noteId', note.id)
            that.http.post(globalUrl + '/note/uploadCover', param, config).then((res) => {
                if ( res.data.code == '000000' ) {
                    that.msg.success('上传封面成功')
                    that.reload()
                } else {
                    that.msg.error('上传封面失败')
                }
            })
        },
        success () {
            console.log('上传成功')
        },
    }
}
</script>

<style scoped>
.add-note-items {
    display: flex;
}

.add-note-items .ivu-form-item:first-child {
    width: 75%;
}

.add-note-items .ivu-form-item:last-child {
    width: 20%;
    margin-left: 5%;
}

.v-note-wrapper {
    height: 800px;
}

/*模板按钮*/
.note-temp {
    cursor: pointer;
    background-color: rgb(250, 147, 32);
    padding: 0 10px;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    position: absolute;
    right: 400px;
    z-index: 10000;
    top: 5px;
}

.note-temp:hover {
    background-color: rgb(215, 124, 23);
}

/*笔记封面图片*/
.note-cover img {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
</style>
